<template>
    <show-modal :title="title" :loading="loading" width="400px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="厂区名称" prop="factoryName">
                <a-input v-model="form.factoryName" placeholder="请输入厂区名称" />
            </a-form-model-item>
            <a-form-model-item label="厂区编码" prop="factoryCode">
                <a-input v-model="form.factoryCode" :disabled="form.factoryId?true:false" placeholder="请输入厂区编码" />
            </a-form-model-item>
            <a-form-model-item label="厂区坐标" prop="factoryLocation">
                <a-button style="width:100%;text-align:left;" @click="showMap = true">{{
                    form.factoryLocation ? form.factoryLocation : '设置厂区坐标'
                }}</a-button>
            </a-form-model-item>
            <a-form-model-item label="厂区地址" prop="factoryAddress">
                <a-input v-model="form.factoryAddress" placeholder="请输入厂区地址" />
            </a-form-model-item>
            <a-form-model-item label="厂区等级" prop="factoryLevel">
                <a-select v-model="form.factoryLevel" placeholder="请选择厂区等级">
                    <a-select-option :value="level.value" v-for="(level,index) in factoryLevels" :key="index">{{level.label}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="厂区负责人" prop="factoryLeader">
                <a-select v-model="form.factoryLeader" optionFilterProp="name" showSearch placeholder="请选择厂区负责人">
                    <a-select-option
                        :value="user.userId+''"
                        :name="user.userName+user.userId"
                        v-for="user in userList"
                        :key="user.userId">
                        {{user.userName}}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="联系电话" prop="factoryTel">
                <a-input v-model="form.factoryTel" placeholder="请输入联系电话" />
            </a-form-model-item>
            <a-form-model-item label="状态" prop="open">
                <a-switch :checked="form.open == 1 ? true : false" @change="onChangeShow" />
            </a-form-model-item>
        </a-form-model>

        <template v-if="showMap">
            <show-map :location="form.factoryLocation" :address="form.factoryAddress" @cancel="showMap = false" @submit="getLocation" />
        </template>

    </show-modal>
</template>

<script>
import { rules } from './rules';
import ShowMap from '@/views/components/map'
import {factoryLevels} from '../dictionary'
import {addInfo,updateInfo} from '@/api/system/factory'

export default {
    name: 'FactoryInfo',
    components:{
        ShowMap
    },
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        userList:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            loading: false,
            title: '厂区信息',
            rules,
            factoryLevels,
            form: {
                factoryName: '',
                factoryCode:'',
                factoryAddress:'',
                factoryLocation:'',
                factoryLevel:undefined,
                factoryLeader:undefined,
                factoryTel:'',
                open:1
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            showMap:false,
        };
    },
    created() {
        this.form = {...this.form,...this.info}
    },
    methods: {
        //提交信息
        submit(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let form = this.form;
                        let res = null
                        if (form.factoryId) {
                            //编辑
                            res = await updateInfo(form);
                        } else {
                            //新增addInfo
                            res = await addInfo(form);
                        }
                        let {code} = res;
                        if(code==200){
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        }
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        //获取经纬度
        getLocation(e) {
            console.log(e)
            let {lnglat,address} = e;
            this.form.factoryLocation = lnglat;
            this.form.factoryAddress = address;
            this.showMap = false;
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.open = 1;
            } else {
                this.form.open = 0;
            }
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped></style>
